<template>
  <div>
    <h1 style="text-align: center; margin: 0">添加影片</h1>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="影片名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <img
        :src="
          ruleForm.coverImage
            ? ruleForm.coverImage
            : 'http://one.talesxiaoxin.cn/?/images/2020/11/10/4iYtTyQ7aO/76763707_p0.png'
        "
        alt="影片图片"
        style="
          width: 200px;
          height: 200px;
          object-fit: cover;
          margin-left: 100px;
        "
        error="this.src='http://one.talesxiaoxin.cn/?/images/2020/11/10/4iYtTyQ7aO/76763707_p0.png'"
      />
      <br />
      <el-form-item label="影片图片url" prop="coverImage">
        <el-input v-model="ruleForm.coverImage"></el-input>
      </el-form-item>
      <el-form-item label="影片播放url" prop="playUrl">
        <el-input v-model="ruleForm.playUrl"></el-input>
      </el-form-item>
      <!-- <el-form-item label="活动区域" prop="region">
      <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item> -->
      <!-- <el-form-item label="活动时间" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="ruleForm.date1"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <el-time-picker
            placeholder="选择时间"
            v-model="ruleForm.date2"
            style="width: 100%"
          ></el-time-picker>
        </el-form-item>
      </el-col>
    </el-form-item> -->
      <!-- <el-form-item label="活动性质" prop="type">
      <el-checkbox-group v-model="ruleForm.type">
        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
        <el-checkbox label="地推活动" name="type"></el-checkbox>
        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
      </el-checkbox-group>
    </el-form-item> -->
      <el-form-item label="分类" prop="category">
        <el-radio-group v-model="ruleForm.category">
          <el-radio label="电影"></el-radio>
          <el-radio label="动漫"></el-radio>
          <el-radio label="综艺"></el-radio>
          <el-radio label="电视剧"></el-radio>
          <el-radio label="纪录片"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="影片介绍" prop="desc">
        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即添加</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { addVideoData } from "@/server/server";
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        //region: "",
        // date1: "",
        // date2: "",
        // type: [],
        views: 0,
        desc: "",
        playUrl: "",
        coverImage: "",
        category: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入影片名称", trigger: "blur" },
          {
            min: 1,
            max: 100,
            message: "长度在 1 到 100 个字符",
            trigger: "blur",
          },
        ],
        // region: [
        //   { required: true, message: "请选择活动区域", trigger: "change" },
        // ],
        // date1: [
        //   {
        //     type: "date",
        //     required: true,
        //     message: "请选择日期",
        //     trigger: "change",
        //   },
        // ],
        // date2: [
        //   {
        //     type: "date",
        //     required: true,
        //     message: "请选择时间",
        //     trigger: "change",
        //   },
        // ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个分类",
            trigger: "change",
          },
        ],
        coverImage: [
          {
            required: true,
            message: "请填写影片图片url地址",
            trigger: "change",
          },
        ],
        playUrl: [
          { required: true, message: "请填写播放url地址", trigger: "change" },
        ],
        category: [
          { required: true, message: "请选择一个分类", trigger: "change" },
          { required: true, message: "请选择一个分类", trigger: "blur" },
        ],
        desc: [{ required: true, message: "请填写介绍", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm);
          let data = this.ruleForm;
          switch (data.category) {
            case "电影":
              data.category = 1;
              break;

            case "动漫":
              data.category = 2;
              break;
            case "综艺":
              data.category = 3;
              break;
            case "电视剧":
              data.category = 4;
              break;
            default:
              data.category = 5;
              break;
          }
          addVideoData(data)
            .then((result) => {
              console.log(2);
              console.log(result);
              this.$message({
                type: "success",
                message: "添加成功",
              });
              this.$refs[formName].resetFields(); //重置表单
            })
            .catch((err) => {
              console.log(err);
              this.$message.error("错误,网络错误");
            });
          // addVideoData({})
          //   .then((result) => {
          //     console.log(result);
          //   })
          //   .catch((err) => {
          //     console.log(err);
          //   });
          // alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>